<template>
  <div>
    <div id="map"
         class="map">
    </div>
    <div id='info'></div>
  </div>
</template>
<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {
  equalTo as equalToFilter,
  like as likeFilter,
  and as andFilter
} from 'ol/format/filter.js';
import { WFS, GeoJSON } from 'ol/format.js';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer.js';
import BingMaps from 'ol/source/BingMaps.js';
import VectorSource from 'ol/source/Vector.js';
import { Stroke, Style } from 'ol/style.js';


export default {
  data () {
    return {
      infoUrl: '',
      map: null,
      wmsSource: null
    }
  },
  methods: {

  },
  mounted () {
    var vectorSource = new VectorSource();
    var vector = new VectorLayer({
      source: vectorSource,
      style: new Style({
        stroke: new Stroke({
          color: 'rgba(0, 0, 255, 1.0)',
          width: 2
        })
      })
    });
    var map = new Map({
      layers: [vector],
      target: document.getElementById('map'),
      view: new View({
        // center: [-8908887.277395891, 5381918.072437216],
        //maxZoom: 19,
        // zoom: 12
        projection: 'EPSG:4326'
      })
    });
    // generate a GetFeature request
    var featureRequest = new WFS().writeGetFeature({
      srsName: 'EPSG:4326',
      featureNS: 'http://www.openplans.org/topp',
      featurePrefix: 'topp',
      featureTypes: ['states'],
      outputFormat: 'application/json',
      filter: likeFilter('STATE_NAME', 'Delawar*') /* andFilter(
        likeFilter('STATE_NAME', 'Delawar*')
        // equalToFilter('waterway', 'riverbank')
      )  */
    });
    var wfs = new WFS({
      featureNS: 'http://www.openplans.org/topp',
      featureType: ['topp:states']
    });
    var features = wfs.readFeatures('http://localhost:8082/geoserver/topp/ows', {
      dataProjection: 'EPSG:4326'
    });
    vectorSource.addFeatures(features);
    map.getView().fit(vectorSource.getExtent());
    // then post the request and add the received features to a layer
    /* fetch('http://localhost:8082/geoserver/topp/ows', {
      method: 'POST',
      body: new XMLSerializer().serializeToString(featureRequest)
    }).then(function (response) {
      return response.json();
    }).then(function (json) {
      var features = new GeoJSON().readFeatures(json);
      vectorSource.addFeatures(features);
      map.getView().fit(vectorSource.getExtent());
    }); */
  },
}
</script>
<style lang="scss" scoped>
#map {
  height: 800px;
}
</style>
